<meta charset="utf-8" />
<script src="../lib/jquery.js"></script>
<script src="../lib/jquery-ui.js"></script>
<link rel="stylesheet" type="text/css" href="css/jquery-ui.css">
<script src="09_preventPropagation.js"></script>

<style>
body {
	margin-top: 60px;
	margin-left: 150px;
}

#draggable {
	border: 1px solid red;
	width: 100px;
	height: 100px;
	padding: 0.5em;
	float: left;
	margin: 10px 10px 10px 0;
}

#droppable {
	border: 1px solid red;
	width: 300px;
	height: 300px;
	padding: 0.5em;
	float: left;
	margin: 10px;
}

#droppable-inner {
	border: 1px solid red;
	width: 260px;
	height: 150px;
	padding: 0.5em;
	float: left;
	margin: 10px;
}

.drop {
	border: 1px solid blue !important;
}
</style>

<div id="draggable">
	<p>Drag Me</p>
</div>
<div id="droppable" class="ui-widget-header">
	<p>Outer droppable</p>
	<div id="droppable-inner" class="ui-widget-header">
		<p>Inner droppable</p>
	</div>
</div>